<template>
  <div class="VisitType">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <!-- <el-form-item label="归属组织" prop="deptCode">
            <SearchSelectPicker
              url="/call-center/api/v1/departmentInfo/page"
              placeholder="请选择归属组织"
              value-name="deptNo"
              lable-name="deptName"
              :value.sync="formData.deptCode"
            ></SearchSelectPicker>
          </el-form-item> -->
          <el-form-item prop="taskName" label="任务名称">
            <el-input v-model="formData.taskName" placeholder="请输入任务名称" clearable />
          </el-form-item>
          <el-form-item prop="taskType" label="任务类型">
            <SearchSelectPicker
              url="/call-center/api/v1/callBackTask/type/page"
              placeholder="请选择任务类型"
              lable-name="typeName"
              :value.sync="formData.taskType"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="taskState" label="任务状态">
            <el-select v-model="formData.taskState" placeholder="请选择任务状态" clearable filterable>
              <el-option label="未开始" :value="0" />
              <el-option label="执行中" :value="1" />
              <el-option label="已结束" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item prop="createBy" label="创建人">
            <SearchSelectPicker
              url="/call-center/api/v1/staffInfo/page"
              placeholder="请选择创建人"
              value-name="accountNo"
              lable-name="staffName"
              :value.sync="formData.createBy"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="createTime" :span="7" label="创建日期">
            <el-date-picker
              v-model="formData.createTime"
              type="daterange"
              opt
              operator=">"
              :limite="new Date()"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item :span="5">
            <Button @click="$refs.form.resetFields()">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0">
        <Button type="primary" @click="createTask">创建任务</Button>
        <Button
          type="primary"
          @click="update"
        >修改</Button>
        <Button
          type="danger"
          @click="delet"
        >删除</Button>
        <!-- <ChangeSeats
          type="primary"
          text="更换执行坐席"
          :cur-data="tempData"
          @confrim="changeSeatsConfrim"
        /> -->
      </div>
      <table-box
        ref="table"
        class="checkbox_table"
        no-request
        :selected-arry="selectedArry"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        @selection-change="selectionChange"
      >
        <el-table-column slot="before" type="selection" width="55"></el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
// import ChangeSeats from '@/components/ChangeSeats'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { callBackTaskDeleteBatch } from '@/api/callBackTask'
import { filtersRaw, addOneDay } from '@/utils'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'VisitTask',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    // ChangeSeats,
    SearchSelectPicker
  },
  data() {
    return {
      otherFilters: [],
      formData: {
        deptCode: '',
        taskLabel: '',
        taskType: '',
        taskState: '',
        createPeople: '',
        createTime: []
      },
      tempData: null,
      formRules: {},
      selectedArry: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/callBackTask/taskManage',
        sort: 'createTime',
        order: 'desc',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'taskName',
            label: '任务名称'
          },
          {
            prop: 'typeName',
            label: '任务类型'
          },
          {
            prop: 'taskState',
            label: '任务状态',
            formatData: val => {
              if (val.taskState === undefined) {
                return ''
              }
              const v = val.taskState.toString()
              return v === '0' ? '未开始' : v === '1' ? '执行中' : v === '2' ? '已结束' : ''
            }
          },
          {
            prop: '',
            label: '外呼客户数',
            formatData: val => {
              return val.objectMethod === 0 ? val.importTaskSize : val.objectMethod === 1 ? val.onlineTaskSize : val.offlineTaskSize
            }
          },
          {
            prop: 'customerServiceCount',
            label: '执行坐席数'
          },
          {
            prop: 'createBy',
            label: '创建人',
            formatData: v => `${v.createName}(${v.createBy})`
          },
          {
            prop: 'createTime',
            label: '创建时间'
          },
          {
            prop: 'deptName',
            label: '所属组织'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['firstDept', 'groupList', 'taskForm/hasUnfinished'])
  },
  created() {
    // this.$set(this.formData, 'deptCode', this.firstDept)
    // 当前用户业务组
    this.$set(this.formData, 'deptCode', `[${this.groupList.map(e => e.groupNo).join(',')}]`)
  },
  methods: {
    ...mapMutations(['taskForm/SET_REST_TASKFORM']),
    // 根据条件查询
    queryHandle() {
      const list = []
      for (const i in this.formData) {
        if (i === 'createTime') {
          if (this.formData[i] && this.formData[i].length) {
            list.push(filtersRaw(i, this.formData[i][0], '>='))
            list.push(filtersRaw(i, addOneDay(this.formData[i][1]), '<='))
          }
        } else {
          if (this.formData[i] || this.formData[i] === 0) {
            if (i === 'deptCode') {
              list.push(filtersRaw(i, this.formData[i], 'in'))
            } else {
              list.push(filtersRaw(i, this.formData[i], 'like'))
            }
          }
        }
      }
      this.otherFilters = list
      this.$nextTick(() => {
        this.refreshData('opCondition')
      })
    },
    // 任务创建
    createTask() {
      if (this['taskForm/hasUnfinished']) {
        this.$msgbox({
          title: '提示',
          message: '检测到上次任务创建未完成，是否继续上次任务的创建？',
          showCancelButton: true,
          confirmButtonText: '继续',
          cancelButtonText: '创建新任务',
          type: 'warning',
          distinguishCancelAndClose: true
        }).then(() => {
          this.$router.push({ name: 'CreateTask', query: { id: 'newObj' }})
        }).catch(e => {
          if (e === 'close') {
            return
          }
          this['taskForm/SET_REST_TASKFORM']()
          this.$router.push({ name: 'CreateTask', query: { id: 'newObj' }})
        })
      } else {
        this.$router.push({ name: 'CreateTask', query: { id: 'newObj' }})
      }
    },
    // 任务修改
    update() {
      if (this.selectedArry.length !== 1) {
        return this.$message.info('请选择一条要编辑的任务')
      }
      this.$router.push({
        name: 'CreateTask',
        query: { id: this.selectedArry[0].id }
      })
    },
    // 坐席更换
    changeSeatsConfrim() {
      console.log('坐席更换')
    },
    // 执行删除
    delet() {
      if (this.selectedArry.length === 0) {
        return this.$message.info('请至少选择一条要删除的任务')
      }
      return this.$msgbox({
        type: 'warning',
        title: '提示',
        showCancelButton: true,
        message: '确定删除所选择任务？'
      })
        .then(() => {
          var ids = this.selectedArry.map(e => {
            return e.id
          })
          return callBackTaskDeleteBatch(ids)
            .then(res => {
              if (res.success === 1) {
                this.$message({
                  message: '删除任务成功!',
                  type: 'success'
                })
                this.refreshData()
              }
            })
            .catch(er => {
            })
        })
        .catch(e => e)
    },
    // 表格选中变化
    selectionChange(val) {
      if (val.length === 1) {
        this.tempData = val[0]
      } else {
        this.tempData = null
      }
      this.selectedArry = val
    },
    // 刷新表格数据
    refreshData(type = 'onPage') {
      this.$refs.table.initTableData(type)
    }
  }
}
</script>
<style lang='scss' module>
</style>
